<template>
  <div>
    <!-- 收益 -->
    <div class="income_wrapper" v-show="staticData.profit">
      <div>
        <span>组合总收益</span>
        <div v-if="staticData.profit > 0" class="up_data">
          {{ (staticData.profit * 100).toFixed(2) }}%
        </div>
        <div v-else-if="staticData.profit && Number(staticData.profit) === 0" class="zero_data">
          {{ (staticData.profit * 100).toFixed(2) }}%
        </div>
        <div v-else-if="staticData.profit === '' || staticData.profit === '--'">--</div>
        <div v-else class="down_data">{{ (staticData.profit * 100).toFixed(2) }}%</div>
      </div>
      <div>
        <span>年化收益率</span>
        <div v-if="staticData.yearProft > 0" class="up_data">
          {{ (staticData.yearProft * 100).toFixed(2) }}%
        </div>
        <div
          v-else-if="staticData.yearProft && Number(staticData.yearProft) === 0"
          class="zero_data"
        >
          {{ (staticData.yearProft * 100).toFixed(2) }}%
        </div>
        <div v-else-if="staticData.yearProft === '' || staticData.yearProft === '--'">--</div>
        <div v-else class="down_data">{{ (staticData.yearProft * 100).toFixed(2) }}%</div>
      </div>
    </div>
    <!-- 最大回撤 -->
    <div class="max_back_data" v-show="staticData.avg_profit">
      <div>
        <div>平均止盈</div>
        <div v-if="staticData.avg_profit > 0" class="up_data">
          {{ (staticData.avg_profit * 100).toFixed(2) }}%
        </div>
        <div
          v-else-if="staticData.avg_profit && Number(staticData.avg_profit) === 0"
          class="zero_data"
        >
          {{ (staticData.avg_profit * 100).toFixed(2) }}%
        </div>
        <div v-else-if="staticData.avg_profit === '' || staticData.avg_profit === '--'">--</div>
        <div v-else class="down_data">{{ (staticData.avg_profit * 100).toFixed(2) }}%</div>
      </div>
      <div class="cp_run_table">
        <div>平均止损</div>
        <div v-if="staticData.avg_loss > 0" class="up_data">
          {{ (staticData.avg_loss * 100).toFixed(2) }}%
        </div>
        <div v-else-if="staticData.avg_loss && Number(staticData.avg_loss) === 0" class="zero_data">
          {{ (staticData.avg_loss * 100).toFixed(2) }}%
        </div>
        <div v-else-if="staticData.avg_loss === '' || staticData.avg_loss === '--'">--</div>
        <div v-else class="down_data">{{ (staticData.avg_loss * 100).toFixed(2) }}%</div>
      </div>
      <div>
        <div>成功率</div>
        <div v-if="staticData.success_rate > 0" class="up_data">
          {{ (staticData.success_rate * 100).toFixed(2) }}%
        </div>
        <div
          v-else-if="staticData.success_rate && parseInt(staticData.success_rate) === 0"
          class="zero_data"
        >
          {{ (staticData.success_rate * 100).toFixed(2) }}%
        </div>
        <div v-else-if="staticData.success_rate === '' || staticData.success_rate === '--'">--</div>
        <div v-else class="down_data">{{ (staticData.success_rate * 100).toFixed(2) }}%</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'StaticDataProp',
  data() {
    return {
      staticData: true,
    };
  },
  props: {
    staticData: {
      default: '暂无数据',
      type: String,
    },
  },
  watch: {
    staticData: {
      handler(newValue, oldValue) {
        if (newValue) {
          oldValue = [];
          oldValue.profit = parseFloat(newValue.profit).toFixed(2);
          oldValue.yearProft = parseFloat(newValue.yearProft).toFixed(2);
          oldValue.maxDrawdown = parseFloat(newValue.maxDrawdown).toFixed(2);
          oldValue.holdProfit = parseFloat(newValue.holdProfit).toFixed(2);
        }
      },
    },
  },
};
</script>

<style lang="less" scoped>
.income_wrapper {
  display: flex;
  align-items: center;
  color: #999999;
  font-size: 0.24rem;
  justify-content: space-between;
  text-align: center;
  margin-top: 0.4rem;
  padding: 0.2rem 0.9rem;
  line-height: 0.5rem;
  border-top: 0.01rem solid #eeeeee;
  div div:nth-child(2) {
    font-size: 0.48rem;
    letter-spacing: 0;
  }
}
.max_back_data {
  display: flex;
  align-items: center;
  color: #999999;
  font-size: 0.28rem;
  justify-content: space-between;
  text-align: center;
  width: 88%;
  padding: 0.4rem 0;
  margin: 0 auto;
  line-height: 0.4rem;
  border-bottom: 0.01rem solid #eeeeee;
  box-shadow: inset 0 0 0 0 #eeeeee;
  .cp_run_table {
    padding: 0 5%;
    border-left: 0.01rem solid #eeeeee;
    border-right: 0.01rem solid #eeeeee;
  }
  div div:nth-child(2) {
    font-weight: bold;
  }
}

[theme-mode='black'] .income_wrapper {
  display: flex;
  align-items: center;
  color: #999999;
  font-size: 0.24rem;
  justify-content: space-between;
  text-align: center;
  margin-top: 0.4rem;
  padding: 0.2rem 0.9rem;
  line-height: 0.5rem;
  border-top: 0.01rem solid #222222;
  div div:nth-child(2) {
    font-size: 0.48rem;
    letter-spacing: 0;
  }
}
[theme-mode='black'] .max_back_data {
  display: flex;
  align-items: center;
  color: #999999;
  font-size: 0.28rem;
  justify-content: space-between;
  text-align: center;
  width: 88%;
  padding: 0.4rem 0;
  margin: 0 auto;
  line-height: 0.4rem;
  border-bottom: 0.01rem solid #222222;
  box-shadow: inset 0 0 0 0 #222222;
  .cp_run_table {
    padding: 0 5%;
    border-left: 0.01rem solid #222222;
    border-right: 0.01rem solid #222222;
  }
  div div:nth-child(2) {
    font-size: 0.32rem;
    font-weight: bold;
  }
}
</style>
